<template>
  <div class="wrap">
    <h1 class="title">我的报修申请</h1>
    <div class="form">
      <el-form
        label-position="top"
        label-width="auto"
        :model="formLabelAlign"
        style="max-width: 600px"
        ref="Form"
      >
        <el-row>
          <el-col :span="10">
            <el-form-item label="申请人">
              <el-input v-model.trim="formLabelAlign.repairPerson" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="联系方式">
              <el-input v-model.trim="formLabelAlign.phone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="选择楼栋">
              <el-input  v-model.number="formLabelAlign.buildId" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="寝室号">
              <el-input v-model.number="formLabelAlign.dorNumber" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21">
            <el-form-item label="报修问题">
              <el-input
                v-model.trim="formLabelAlign.repairContent"
                type="textarea"
                resize="none"
                :autosize="{ minRows: 3, maxRows: 6 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21">
            <div class=" clear">
              <el-button type="primary" class="fr" @click="submitApply">提交申请</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>


<script  setup>
import { reactive,computed,ref } from "vue";
import { useUserStore } from "@/stores/userStore";
import { submitRepairApply } from "@/utils/axios/stuReqest";

import { useRouter } from "vue-router";

const router =useRouter()
// 标记表单
const Form=ref()
const userStore =useUserStore()
const sex=userStore.userInfo.sex
const buildNumber=computed(()=>{
  let list=[]
  for(let i=0;i<20;i++) list.push(i+1)
  if(sex%2==0) return list.filter(i=>i%2==0)
  if(sex%2===1) return list.filter(i=>i%2==1)
})



const formLabelAlign = reactive({
  buildId: userStore.userInfo.buildId,
  dorNumber: userStore.userInfo.dormitory, //后面根据token获取
  repairPerson: userStore.userInfo.stuName, //后面根据token获取
  repairContent: "",
  phone: userStore.userInfo.phone, //可填可不填
});


const submitApply = ()=>{
   submitRepairApply(formLabelAlign).then(()=>{
    router.push("/home/myrepair")
   })
   
}
</script>


<style scoped lang='sass'>
.form
  // margin-left: 150px

// 间隔设置
.el-row
  .el-col
    margin-right: 20px



.title
  font-size: var(--title-size)
  font-weight: var(--fontweight)
  margin-bottom: 30px
</style>